<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <!-- Bootstrap Styles-->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link th:href="@{/js/morris/morris-0.4.3.min.css}" rel="stylesheet" />
    <!-- Custom Styles-->
    <link th:href="@{/css/custom-styles.css}" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>

<body>
    <div id="wrapper">
        <div th:replace="~{commons/commons::top_navbar}"></div>
        <!--/. NAV TOP  -->
        <div th:replace="~{commons/commons::side_navbar(active='index.html')}"></div>
        <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">


            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        Dashboard <small>Summary of your App</small>
                    </h1>
                    <ol class="breadcrumb">
                      <li><a href="#">Home</a></li>
                      <li><a href="#">Library</a></li>
                      <li class="active">Data</li>
                  </ol>
              </div>
          </div>
          
          
          <!-- /. ROW  -->

          <div class="row">
            <div class="col-md-3 col-sm-12 col-xs-12">
                <div class="panel panel-primary text-center no-boder bg-color-green green">
                    <div class="panel-left pull-left green">
                        <i class="fa fa-bar-chart-o fa-5x"></i>
                        
                    </div>
                    <div class="panel-right pull-right">
                        <h3>8,457</h3>
                        <strong> Daily Visits</strong>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-12 col-xs-12">
                <div class="panel panel-primary text-center no-boder bg-color-blue blue">
                  <div class="panel-left pull-left blue">
                    <i class="fa fa-shopping-cart fa-5x"></i>
                </div>
                
                <div class="panel-right pull-right">
                 <h3>52,160 </h3>
                 <strong> Sales</strong>

             </div>
         </div>
     </div>
     <div class="col-md-3 col-sm-12 col-xs-12">
        <div class="panel panel-primary text-center no-boder bg-color-red red">
            <div class="panel-left pull-left red">
                <i class="fa fa fa-comments fa-5x"></i>
                
            </div>
            <div class="panel-right pull-right">
                <h3>15,823 </h3>
                <strong> Comments </strong>

            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-12 col-xs-12">
        <div class="panel panel-primary text-center no-boder bg-color-brown brown">
            <div class="panel-left pull-left brown">
                <i class="fa fa-users fa-5x"></i>
                
            </div>
            <div class="panel-right pull-right">
             <h3>36,752 </h3>
             <strong>No. of Visits</strong>

         </div>
     </div>
 </div>
</div>


<div class="row">
    <div class="col-md-12">
       <div class="panel panel-default">
          <div class="panel-heading">
             Line Chart
         </div>
         <div class="panel-body">
             <div id="morris-line-chart"></div>
         </div>
     </div>  
 </div>		
</div> 


<div class="row">
 <div class="col-xs-6 col-md-3">
    <div class="panel panel-default">
       <div class="panel-body easypiechart-panel">
          <h4>Customers</h4>
          <div class="easypiechart" id="easypiechart-blue" data-percent="82" ><span class="percent">82%</span>
          </div>
      </div>
  </div>
</div>
<div class="col-xs-6 col-md-3">
    <div class="panel panel-default">
       <div class="panel-body easypiechart-panel">
          <h4>Sales</h4>
          <div class="easypiechart" id="easypiechart-orange" data-percent="55" ><span class="percent">55%</span>
          </div>
      </div>
  </div>
</div>
<div class="col-xs-6 col-md-3">
    <div class="panel panel-default">
       <div class="panel-body easypiechart-panel">
          <h4>Profits</h4>
          <div class="easypiechart" id="easypiechart-teal" data-percent="84" ><span class="percent">84%</span>
          </div>
      </div>
  </div>
</div>
<div class="col-xs-6 col-md-3">
    <div class="panel panel-default">
       <div class="panel-body easypiechart-panel">
          <h4>No. of Visits</h4>
          <div class="easypiechart" id="easypiechart-red" data-percent="46" ><span class="percent">46%</span>
          </div>
      </div>
  </div>
</div>
</div><!--/.row-->


<div class="row">
    <div class="col-md-9 col-sm-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                Bar Chart Example
            </div>
            <div class="panel-body">
                <div id="morris-bar-chart"></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                Donut Chart Example
            </div>
            <div class="panel-body">
                <div id="morris-donut-chart"></div>
            </div>
        </div>
    </div>

</div>
<div class="row">
    <div class="col-md-12">
       <div class="panel panel-default">
          <div class="panel-heading">
             Area Chart
         </div>
         <div class="panel-body">
             <div id="morris-area-chart"></div>
         </div>
     </div>  
 </div>		
</div> 	
<!-- /. ROW  -->





<div class="row">
    <div class="col-md-4 col-sm-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                Tasks Panel
            </div>
            <div class="panel-body">
                <div class="list-group">

                    <a href="#" class="list-group-item">
                        <span class="badge">7 minutes ago</span>
                        <i class="fa fa-fw fa-comment"></i> Commented on a post
                    </a>
                    <a href="#" class="list-group-item">
                        <span class="badge">16 minutes ago</span>
                        <i class="fa fa-fw fa-truck"></i> Order 392 shipped
                    </a>
                    <a href="#" class="list-group-item">
                        <span class="badge">36 minutes ago</span>
                        <i class="fa fa-fw fa-globe"></i> Invoice 653 has paid
                    </a>
                    <a href="#" class="list-group-item">
                        <span class="badge">1 hour ago</span>
                        <i class="fa fa-fw fa-user"></i> A new user has been added
                    </a>
                    <a href="#" class="list-group-item">
                        <span class="badge">1.23 hour ago</span>
                        <i class="fa fa-fw fa-user"></i> A new user has added
                    </a>
                    <a href="#" class="list-group-item">
                        <span class="badge">yesterday</span>
                        <i class="fa fa-fw fa-globe"></i> Saved the world
                    </a>
                </div>
                <div class="text-right">
                    <a href="#">More Tasks <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>

    </div>
    <div class="col-md-8 col-sm-12 col-xs-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                Responsive Table Example
            </div> 
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>S No.</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>User Name</th>
                                <th>Email ID.</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>John</td>
                                <td>Doe</td>
                                <td>John15482</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Kimsila</td>
                                <td>Marriye</td>
                                <td>Kim1425</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Rossye</td>
                                <td>Nermal</td>
                                <td>Rossy1245</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Richard</td>
                                <td>Orieal</td>
                                <td>Rich5685</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Jacob</td>
                                <td>Hielsar</td>
                                <td>Jac4587</td>
                                <td>name@site.com</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Wrapel</td>
                                <td>Dere</td>
                                <td>Wrap4585</td>
                                <td>name@site.com</td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- /. ROW  -->
<footer><p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p></footer>
</div>
<!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script th:src="@{/js/jquery-1.10.2.js}"></script>
<!-- Bootstrap Js -->
<script th:src="@{assets/js/bootstrap.min.js}"></script>

<!-- Metis Menu Js -->
<script th:src="@{assets/js/jquery.metisMenu.js}"></script>
<!-- Morris Chart Js -->
<script th:src="@{assets/js/morris/raphael-2.1.0.min.js}"></script>
<script th:src="@{assets/js/morris/morris.js}"></script>


<script th:src="@{assets/js/easypiechart.js}"></script>
<script th:src="@{assets/js/easypiechart-data.js}"></script>


<!-- Custom Js -->
<script th:src="@{assets/js/custom-scripts.js}"></script>


</body>

</html>